import React, {useEffect} from 'react'

import {Container} from './style'
import {baseUrl} from '../../https'
import { message } from 'antd'

function Markdown(props){
    const {value, onChange} = props

    useEffect(() => {
        createEditor()
    }, [])
/* eslint-disable */
    const createEditor = () => {
        const vditor = new Vditor('vditor', {
            outline: true, //大纲
            placeholder: '请输入博客内容，【注意只有二级和四级标题能够生成目录大纲，标题不要输入 \\>】',
            toolbarConfig: {
                pin: true,
            },
            counter: {
                enable: true
            },
            cache: {
                enable: false,
            },
            upload: {
                url: baseUrl + 'api/upload?fileField=article',
                multiple: false,
                accept: 'image/*',
                fieldName: 'file',
                success: (editor, msg) => {
                    const split = JSON.parse(msg).content.split('.')
                    vditor.insertValue("!["+ split[0] +"]("+ JSON.parse(msg).content +")")
                    message.success('图片上传成功！')
                },
                error: () => {
                    message.error('图片上传失败！')
                }
            },
            after(){ //初始化
                vditor.setValue(value || '')
            },
            input(){
                onChange(vditor.getHTML(), vditor.getValue())
            }
        })
    }
/* eslint-disable */
    return (
        <Container>
            <div className="right" id="vditor"></div>
        </Container>
    )
}

export default Markdown